<style lang="scss" src="./index.scss" scoped></style>
<template>
    <div class="ask-tinymce-editor-box">
        <div class="atye__body">
            <div class="atye__toolbar" ref="toolbarRef"></div>
            <div class="atye__content">
                <tinymce-editor
                    :disabled="disabled"
                    @onInit="onInit"
                    api-key="no-api-key"
                    v-model="modelValue"
                    :init="options"
                ></tinymce-editor>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
/* eslint-disable @typescript-eslint/camelcase */
/* eslint-disable @typescript-eslint/no-unused-vars */
import { Component, Prop, Vue } from "vue-property-decorator";
import tinymce from "tinymce";
import Editor from "@tinymce/tinymce-vue";
import "tinymce/themes/silver";
import "tinymce/icons/default";
import "tinymce/plugins/preview";
import "tinymce/plugins/searchreplace";
import "tinymce/plugins/autolink";
import "tinymce/plugins/directionality";
import "tinymce/plugins/visualblocks";
import "tinymce/plugins/visualchars";
import "tinymce/plugins/fullscreen";
import "tinymce/plugins/image";
import "tinymce/plugins/link";
// import "tinymce/plugins/media";
import "tinymce/plugins/template";
import "tinymce/plugins/code";
import "tinymce/plugins/codesample";
import "tinymce/plugins/table";
import "tinymce/plugins/charmap";
import "tinymce/plugins/hr";
import "tinymce/plugins/pagebreak";
import "tinymce/plugins/nonbreaking";
import "tinymce/plugins/anchor";
import "tinymce/plugins/insertdatetime";
import "tinymce/plugins/advlist";
import "tinymce/plugins/lists";
// import "tinymce/plugins/wordcount";
import "tinymce/plugins/imagetools";
import "tinymce/plugins/textpattern";
import "tinymce/plugins/help";
// import "tinymce/plugins/emoticons";
import "tinymce/plugins/autosave";
// import "tinymce/plugins/bdmap";
// import "tinymce/plugins/indent2em";
import "tinymce/plugins/autoresize";
import "./plugins/media/plugin";
import "./plugins/lineheight/plugin";
import "./plugins/uploadimage/plugin";
import "./plugins/uploadvideo/plugin";
// import "tinymce/plugins/formatpainter";
const baseUrl = process.env.BASE_URL;
const _tinymce = tinymce;
@Component({
    name: "AskTinymceEditorNotAlive",
    components: {
        "tinymce-editor": Editor
    },
    model: {
        prop: "value",
        event: "change"
    }
})
export default class PageBaseBox extends Vue {
    @Prop({
        type: String,
        default: ""
    })
    readonly value!: string;

    @Prop({
        type: Boolean,
        default: false
    })
    readonly disabled!: boolean;

    @Prop({
        type: Object,
        default: () => {
            return {};
        }
    })
    readonly limitImage!: boolean;

    @Prop({
        type: Object,
        default: () => {
            return {};
        }
    })
    readonly limitVideo!: boolean;

    get editorId() {
        return "ask_editor_" + Date.now();
    }

    get modelValue() {
        return this.value;
    }

    set modelValue(val: any) {
        this.$emit("change", val);
    }

    get options() {
        return {
            skin: "oxide",
            language_url: baseUrl + "static/tinymce/langs/zh_CN.js",
            icons_url: baseUrl + "static/tinymce/icons/default/icons.min.js",
            skin_url: baseUrl + "static/tinymce/skins/ui/oxide",
            content_css:
                baseUrl + "static/tinymce/skins/content/default/content.css",
            language: "zh_CN",
            plugins:
                "preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists imagetools textpattern help autosave autoresize lineheight uploadimage uploadvideo",
            toolbar: [
                "code undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | table uploadimage uploadvideo charmap hr pagebreak insertdatetime print preview | fullscreen",
                "formatselect fontselect fontsizeselect | lineheight bullist numlist | blockquote subscript superscript removeformat"
            ],
            menu: {
                // file: { title: '文件', items: 'newdocument' },
                // edit: { title: '编辑', items: 'undo redo | cut copy paste pastetext | selectall' },
                insert: {
                    title: "插入",
                    items:
                        "link inserttable | charmap hr | pagebreak nonbreaking anchor toc | insertdatetime"
                }
                // view: { title: '查看', items: 'visualaid' },charmap hr pagebreak insertdatetime
                // format: { title: '格式', items: 'bold italic underline strikethrough superscript subscript | formats | removeformat' },
                // table: { title: '表格', items: 'inserttable tableprops deletetable | cell row column' },
                // tools: { title: '工具', items: 'spellchecker code' }
            },
            menubar: false,
            min_height: 500,
            height: 500,
            max_height: 500,
            resize: false,
            toolbar_mode: "wrap",
            uploadimage_option: {
                path: this.$route.path
            },
            uploadvideo_option: {
                path: this.$route.path
            },
            fontsize_formats: "12px 14px 16px 18px 24px 36px 48px 56px 72px",
            font_formats:
                "微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats;知乎配置=BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;小米配置=Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif",
            contextmenu: "link image imagetools table spellchecker media"
        };
    }

    editor: any = null;

    onInit(e: any, editor: any) {
        // console.log('init');
        this.editor = editor;
        this.refreshEditor();
        this.editor.on("input change", () => {
            this.refreshModel("input");
        });
        // this.editor.on("change", () => {
        //     this.refreshModel("change");
        // });
    }

    refreshEditor() {
        // console.log("set", this.value);
        this.editor && this.editor.setContent(this.value);
    }

    refreshModel(val: any) {
        const _html = this.editor && this.editor.getContent();
        // if (_html && _html === "<p><br></p>") {
        //     _html = "";
        // }
        this.$emit("change", _html);
        return _html;
    }
}
</script>
